<template>

  <view class="tabbar">
    <view
      class="tabbar-item"
      v-for="(item, index) in list"
      :key="index"
      @click="changeTab(index)">
      <view class="select" v-if="current == index">
        <view class="i-t position">
          <image
            class="img imgactive"
            mode="widthFix"
            :src="item.selectedIconPath"
            v-if="current == index"></image>
          <image
            class="img"
            mode="widthFix"
            :src="item.iconPath"
            v-else></image>
          <view class="text active" v-if="current == index">
            {{ item.text }}
          </view>
          <view class="text" v-else>{{ item.text }}</view>
        </view>
      </view>
      <view v-else>
        <image
          class="img"
          mode="widthFix"
          :src="item.selectedIconPath"
          v-if="current == index"></image>
        <image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
        <view class="text active" v-if="current == index">{{ item.text }}</view>
        <view class="text" v-else>{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // name: "tab-bar",
  // props: {
  //   selected: {
  //     type: Number,
  //   },
  // },
   name:"tabbar",
  		props: ['current'],
  data() {
    return {
     
	 list: [
	   {
	     pagePath: "/pages/home/home",
	     text: "统计",
	     iconPath: "../../static/home.png",
	     selectedIconPath: "../../static/_home.png",
	   },
	   {
	     pagePath: "/pages/category/category",
	     text: "预约",
	     iconPath: "../../static/category.png",
	     selectedIconPath: "../../static/_category.png",
	   },
	   {
	     pagePath: "/pages/center/center",
	     text: "个人",
	     iconPath: "../../static/mine.png",
	     selectedIconPath: "../../static/_mine.png",
	   },
	 ],
	  
    };
  },
  created() {
  		      uni.hideTabBar() 
  		    },
  methods: {
   changeTab(e) {
	   console.log('触发了',this.list[e].pagePath);
   		        uni.switchTab({
   		          url:  this.list[e].pagePath,
   		        })
   		      }

	

  },
};
</script>

<style >

.tabbar {
  font-size: 24rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 140rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
/*  padding: 20rpx 0; */
  border-top: 1rpx solid rgba(153,153,153,0.4);
}
,
.tabbar-item {
  height: 100%;
  padding: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img {
  height: 54rpx;
  width: 54rpx;
 /* margin: 0 4vw; */
}
.text {
  text-align: center;
  color: #cacaca;
}
.i-t {
	color: #000000;
}
.select {
	
}
.imgactive {

}
.text.active {

 color: #000000;
}
</style>
